
/*
 * @Autor: Mr Lu
 * @Version: 1.0
 * @Date: 2019-12-03
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-12-11
 * @Description:  地图标点
 */
<template>
  <div>
    <div id="image-map"></div>
    <div class="flex flex-wrap">
      <p
        v-for="(point,index) in pointArray"
        :key="index"
        class="pointFlag"
        :class="currentId==point.id?'active':''"
        @click.stop="changeView(point)"
      >
        <label>{{point.id}}</label>
        <span class="closeFlag" @click.stop="removeMarker(point)" v-show="currentId==point.id">
          <i class="iconfont iconqingchu"></i>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
export default {
  name: "CopyMe",
  components: {},
  data() {
    return {
      map: null,
      i: 1,
      url: require("./a.png"),
      currentId: "",
      pointArray: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.imgLoad(this.url);
  },
  watch: {},
  methods: {
    skipPage(item) {
      this.$router.push({
        name: item.path
      });
    },
    imgLoad(url) {
      var img = new Image();
      img.src = url;
      if (img.complete) {
        this.initMap(img.width, img.height);
      } else {
        img.onload = () => {
          this.initMap(img.width, img.height);
          img.onload = null;
        };
      }
    },
    initMap(w, h) {
      var bounds = [[0, 0], [h, w]];
      this.map = L.map("image-map", {
        crs: L.CRS.Simple,
        maxZoom: 20,
        minZoom: -4,
        maxBounds: bounds,
        center: [0, 0],
        zoomControl: false,
        zoomAnimationThreshold: 20
      });
      this.map.getContainer().style.width = "100%";
      this.map.getContainer().style.height = 300 + "px";
      this.map.fitBounds(bounds);
      //this.map.setMaxBounds(bounds);
      var image = L.imageOverlay(this.url, bounds, {
        interactive: true
      }).addTo(this.map);
      image.on("click", this.onMapClick);
      this.reshowMarker();
    },
    onMapClick(e) {
      this.addMarker(e.latlng.lat, e.latlng.lng);
    },
    reshowMarker() {
      var points = [
        { id: 1, lat: 564, lng: 488 },
        { id: 2, lat: 552, lng: 796 },
        { id: 3, lat: 320, lng: 552 }
      ];
      // let points = newArray;
      if (points.length) {
        points.forEach(item => {
          this.addMarker(item.lat, item.lng);
        });
      }
    },
    changeView(item) {
      this.currentId = item.id;
      this.map.setView([item.lat, item.lng], 1);
    },
    removeMarker(obj) {
      this.currentId = "";
      let removeIndex = this.pointArray.findIndex(item => item.id == obj.id);
      if (removeIndex != -1) {
        this.pointArray[removeIndex].mark.remove();
        this.pointArray.splice(removeIndex, 1);
        this.pointArray.forEach((item, index) => {
          if (item.id > obj.id) {
            item.id = item.id - 1;
            item.mark.bindTooltip(String(item.id)).openTooltip();
          }
        });
        this.map.setView([0, 0], -2);
      }
    },
    addMarker(lat, lng) {
      let pointIndex = this.pointArray.length;
      var myIcon = L.divIcon({ className: "add_point_blue" });
      var mark = L.marker([lat, lng], { icon: myIcon }).addTo(this.map);
      mark
        .bindTooltip((pointIndex + 1).toString(), {
          offset: [0, -6],
          direction: "center",
          permanent: true,
          className: "leaflet-label"
        })
        .openTooltip();
      this.pointArray.push({
        id: pointIndex + 1,
        mark: mark,
        lat,
        lng
      });
      //console.log(JSON.stringify(this.pointArray));
    }
  },
  destroyed() {}
};
</script>
<style lang="scss">
#image-map {
  width: 100%;
  margin-bottom: 10px;
  background: #fff;
  .leaflet-control {
    display: none;
  }
}
.leaflet-label {
  height: 25px;
  min-width: 25px;
  font-size: 12px;
  display: flex;
  color: #fff;
  background: rgba(0, 128, 203, 1);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.add_point_blue {
  width: 10px;
  height: 10px;
  color: #fff;
  /* border-radius: 50%; */
  background: transparent;
}
.pointFlag {
  width: 13.5%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  background: #ddd;
  position: relative;
  &.active {
    background: #fff;
  }
  .closeFlag {
    position: absolute;
    right: -5px;
    top: -5px;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .closeFlag.active {
    background: #fff;
  }
}
</style>
